<template>
	<view>
		<view class="bkcolor">
			<image :src="baseUrl + 'images/static/quickMatch/Group 78587@2x.png'" mode="" class="bkimage"></image>
			<view class="title">
				<view class="back" @click="back">
					<image :src="baseUrl + 'images/static/home/back.png'" class="bk"></image>
				</view>
				<view class="titleName">快速匹配</view>

			</view>
			<view class="advertise">全球海量优质翻译已入驻，请选择您的要求，立即匹配。</view>
		</view>

		<view class="matchForm">
			<u-form :model="form" ref="uForm">
				<u-form-item label="国家/地区" label-width='auto' prop="country" label-position='top'>
					<view class="inputarera">
						<u-input v-model:value="form.country"
							style="width:300rpx; text-align: center;border: 2rpx solid #BBBBBB ; border-radius: 8rpx 8rpx;"
							placeholder="请输入国家/地区" input-align='center' />
						<u-input class="site-input-split" style="width: 30rpx; border-left: 0; pointer-events: none" 
							placeholder="~" disabled />
						<u-input v-model:value="form.city"
							style="width: 300rpx; text-align: center;border: 2rpx solid #BBBBBB ; border-radius: 8rpx 8rpx;"
							placeholder="请输入城市" input-align='center' />

					</view>
				</u-form-item>
				<u-form-item label="语种" label-width='auto' prop="sourceLanguage" label-position='top'>
					<view class="inputarera">
						<u-input v-model:value="form.sourceLanguage"
							style="width:280rpx; text-align: center;border: 2rpx solid #BBBBBB ; border-radius: 8rpx 8rpx;"
							placeholder="请输入语言" input-align='center' />
						<text>互译</text>
						<u-input v-model:value="form.TargetLanguage"
							style="width: 280rpx; text-align: center;border: 2rpx solid #BBBBBB ; border-radius: 8rpx 8rpx;"
							placeholder="请输入语言" input-align='center' />

					</view>
				</u-form-item>
				<u-form-item label="服务类型" label-width='auto' label-position='top'>
					<u-input v-model="form.ServiceType" placeholder="请选择你需要的服务" type="select"
						@click="ServiceTypeShow = true" />
					<u-select v-model="ServiceTypeShow" mode="single-column" :list="ServiceTypelist"
						@confirm="confirmServiceType"></u-select>

				</u-form-item>
				<u-form-item label="预约时间" label-width='auto' prop="AppointmentStartTime" label-position='top'>
					<view class="inputarera">
						<u-input v-model:value="form.AppointmentStartTime"
							style="width:280rpx; text-align: center;border: 2rpx solid #BBBBBB ; border-radius: 8rpx 8rpx;"
							@click="Timeshow = true" placeholder="预约开始时间" input-align='center' type="select" />
						<u-picker mode="time" v-model="Timeshow" :params="params" @confirm='confirmTime'></u-picker>
						<text>至</text>
						<u-input v-model:value="form.AppointmentEndTime"
							style="width: 280rpx; text-align: center;border: 2rpx solid #BBBBBB ; border-radius: 8rpx 8rpx;"
							@click="Timeshow1 = true" placeholder="预约结束时间" input-align='center' type="select" />
						<u-picker mode="time" v-model="Timeshow1" :params="params" @confirm='confirmTime1'></u-picker>
					</view>


				</u-form-item>

				<u-form-item label="是否涉及行业名词" label-width='120' label-position='top'>
					<u-radio-group v-model="form.noun">
						<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					</radio-group>
					<u-input v-model="form.industry" placeholder="请输入涉及行业" />
				</u-form-item>

				<u-form-item label="QQ/微信(选填，帮助我们以更优的方式快速联系您)" label-width='auto' label-position='top'>
					<u-input v-model="form.contact" placeholder="请输入qq/微信" />

				</u-form-item>

			</u-form>
			<view class="submit"><u-button @click="submit" type='primary'>快速匹配</u-button></view>
		</view>
		<!-- 弹出框蒙版层选择档次 -->
		<view class="selectGrade" v-if="showGrade">
			<image :src="baseUrl + 'images/static/quickMatch/Group 78589@2x.png'" mode="" class="selectbk"></image>
			<view class="selectTitle">请选择翻译服务</view>
			<view class="severList">
				<!-- 标准 -->
				<view class="list1">
					<view class="li">
						<image :src="baseUrl + 'images/static/quickMatch/Component 1@2x.png'" mode="" class="iconlevel"></image>
						<text class="t1">标准</text>
					</view>
					<view class="li">
						<text class="t1">旅游陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">工厂陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">展会陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">
						<text class="t1">￥300-1800/天</text>

					</view>
				</view>
				<!-- 专业 -->
				<view class="list1">
					<view class="li">
						<image :src="baseUrl + 'images/static/quickMatch/Component 1@2x(1).png'" mode="" class="iconlevel"></image>
						<text class="t1">专业</text>
					</view>
					<view class="li">
						<text class="t1">旅游陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">工厂陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">展会陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">交替传译</text>
							<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">商务洽谈</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">专业性陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">

					</view>
					<view class="li">
						<text class="t1">￥1800-3000/天</text>

					</view>
				</view>
				<!-- 资深 -->
				<view class="list1 listZS">
					<view class="li">
						<image :src="baseUrl + 'images/static/quickMatch/Component 1@2x(2).png'" mode="" class="iconlevel"></image>
						<image :src="baseUrl + 'images/static/quickMatch/资深@2x.png'" mode=""
							style="width: 40rpx;height:20rpx;vertical-align: middle;"></image>
					</view>
					<view class="li">
						<text class="t1">旅游陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">工厂陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">展会陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">交替传译</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">商务洽谈</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">专业性陪同</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">大型会议</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">学术交流</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">同声传译</text>
						<image :src="baseUrl + 'images/static/quickMatch/Frame@2x.png'" mode="" class="sure"></image>
					</view>
					<view class="li">
						<text class="t1">￥3000-6000/天</text>

					</view>
				</view>
			</view>
			<!-- 选择按钮 -->
			<view class="btnbox">
				<image :src="baseUrl + 'images/static/quickMatch/Frame 1010104220@2x.png'" mode="" class="btnlevel" @click="grade('标准')"></image>
				<image :src="baseUrl + 'images/static/quickMatch/Frame 1010104220@2x.png'" mode="" class="btnlevel"  @click="grade('专业')"></image>
				<image :src="baseUrl + 'images/static/quickMatch/Frame 1010104221@2x.png'" mode="" class="btnlevel"  @click="grade('资深')"></image>
			</view>
			<view class="selectNotice">因翻译业务工作内容受多种因素影响，价格以具体沟通服务要求为准</view>
			<view class="cancel" @click="closeGrade">
				<image :src="baseUrl + 'images/static/quickMatch/Frame@2x(1).png'" mode="" class="cancelImage"></image>
			</view>
		</view>
		<view class="Mask" v-if='showGrade' @click="closeGrade"></view>
	</view>
</template>

<script>
	import {
		request,
		baseUrl
	} from '../../http/request.js';
	export default {
		data() {
			return {
				baseUrl: baseUrl,
				//控制弹出窗的显示否
				showGrade: false,

				// 性别选择
				sexlist: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},

				],
				//时间选择
				Timeshow: false,
				Timeshow1: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					country: "",
					city: '', //城市
					ServiceType: '', //服务类型
					industry: "", //行业
					contact:"",
					sourceLanguage:'',
					TargetLanguage:"",
					AppointmentStartTime:"",
					AppointmentEndTime:"",
					noun:"",
					userId:"",
					phoneNumber:""
					
					
				},
				show: false,
				countryShow: false,
				ServiceTypeShow: false,
				ServiceTypelist: [{
						value: 1,
						label: "口译",
					},
					{
						value: 2,
						label: '陪同'
					}
				],
				rules: {
					country: [{
						required: true,
						message: '请输入国家',
						trigger: ['change', 'blur'],
					}],
					city: [{
						required: true,
						message: '请输入城市',
						trigger: ['change', 'blur'],
					}],
					level: [{
						required: true,
						message: '请输入等级',
						trigger: ['change', 'blur'],
					}],
					sourceLanguage: [{
						required: true,
						message: '请输入语言',
						trigger: ['change', 'blur'],
					}],
					noun: [{
						required: true,
						message: '请输入名词',
						trigger: ['change', 'blur'],
					}],

					phoneNumber: [{
						required: true,
						message: '请输入电话',
						trigger: ['change', 'blur'],
					}],
					industry: [{
						required: true,
						message: '请输入行业',
						trigger: ['change', 'blur'],
					}],
					Captcha: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					AppointmentStartTime: [{
						required: true,
						message: '请输入预约时间',
						trigger: ['change', 'blur'],
					}],


				},

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			confirm(e) {
				this.form.province = e.province.label
				this.form.city = e.city.label
				// this.form.county = e.area.label
				// 省市区拼接
				this.form.city = e.province.label + e.city.label + e.area.label
				// console.log("全部===>", this.form.area)
				console.log("省===>", this.form.province)
				console.log("市===>", this.form.city)
				console.log("县===>", this.form.county)
			},
			confirmServiceType(e) {
				console.log(e);
				this.form.ServiceType = e.map(item => item.label).join('/')
			},
			confirmCountry(e) {
				this.form.city = ''
				console.log(e);
				this.form.country = e.map(item => item.label).join('/')
			},
			//确定时间
			confirmTime(e) {
				console.log(e);
				this.form.AppointmentStartTime = `${e.year}/${e.month.padStart(2, '0')}/${e.day.padStart(2, '0')}`
			},
			confirmTime1(e) {
				console.log(e);
				this.form.AppointmentEndTime = `${e.year}/${e.month.padStart(2, '0')}/${e.day.padStart(2, '0')}`
			},
			//选择档次
		async	grade(level){
		
				const intentOrderId=uni.getStorageSync('intentOrderId')
			await  this.$http.intetOrderHttp.updateGrade({Grade:level,intentOrderId}).then(res=>{
				console.log("res",res)
				if(res.code==200){
					uni.navigateTo({
						url: '/pagesServiece/serviece/serviece'
					})
				}
			})
			},
			//快速匹配
			submit() {
				this.showGrade = true
				console.log(this.form)
				this.form.phoneNumber=uni.getStorageSync('phoneNumber')
					this.form.account=uni.getStorageSync('phoneNumber')
						this.form.userId=uni.getStorageSync('_id')
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.showGrade = true
						
						console.log(this.form)
						this.$http.intetOrderHttp.addintentOrder(this.form).then(res => {
							console.log("res",res)
							if(res.code==200){
								
								this.showGrade = true
									uni.setStorageSync("intentOrderId", res.intentData._id)
							}
						}).catch(Error => {
							console.log(Error)

						})


					}
				})
			},
			//关闭弹出框
			closeGrade() {
				this.showGrade = false
			},
		
		}
	}
</script>

<style lang="scss">
	.bkcolor {
		overflow: auto;
		width: 100%;
		position: relative;

		.advertise {
			width: 355rpx;
			height: 150rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			position: absolute;
			left: 34rpx;
			top: 230rpx
		}

		.bkimage {
			width: 100%;
			height: 596rpx;
		}

		.title {
			width: 750rpx;
			height: 88rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// background-color: pink;
			position: absolute;
			top: 88rpx;
			display: flex;
			justify-items: center;
			padding: 0 17rpx;
			margin-bottom: 200rpx;
		}

		.back {
			height: 88rpx;
			line-height: 88rpx;
		}

		.bk {
			width: 48rpx;
			height: 48rpx;
			margin-top: 20rpx;

		}

		.titleName {
			width: 638rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.9);
		}
	}


	.matchForm {
		width: 100%;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 32rpx 32rpx;
		position: relative;
		top: -170rpx;
	}

	.notice {
		text-align: center;
		margin-top: 20rpx;
	}

	.submit {
		margin-top: 30rpx;

	}

	.selectGrade {
		position: fixed;
		top: 50%;
		/* 将元素的顶部定位到屏幕的中间 */
		left: 50%;
		/* 将元素的左侧定位到屏幕的中间 */
		transform: translate(-50%, -50%);
		/* 使用 transform 属性将元素向左上方偏移自身宽高的一半，使其居中显示 */
		z-index: 999;

		.selectbk {
			width: 680rpx;
			height: 1063rpx;
		}

		.selectTitle {
			height: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			position: absolute;
			left: 60rpx;
			top: 90rpx;
		}

		.severList {
			width: 640rpx;
			display: flex;
			position: absolute;
			justify-content: space-around;
			left: 20rpx;
			top: 164rpx;

			.list1 {

				width: 200rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx;

				.li {
					width: 200rpx;
					height: 66rpx;
					text-align: center;
					line-height: 66rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					.iconlevel {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
						margin-right: 2rpx;
					}

					.sure {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
						vertical-align: middle;
					}
				}

				.li:nth-child(2n+1) {
					background: #F9F9F9;
				}

				.li:nth-child(1) {
					border-radius: 24rpx 24rpx 0rpx 0rpx;
				}

				.li:nth-child(11) {
					border-radius: 0rpx 0rpx 24rpx 24rpx;
				}
			}

			.listZS {
				.li:nth-child(2n+1) {
					background: #FFE8D4;
				}

				.li:nth-child(2n) {
					background: #FFF7F1;
				}

			}
		}

		.selectNotice {
			width: 640rpx;
			position: absolute;
			left: 20rpx;
			top: 984rpx;
			font-weight: 400;
			font-size: 20rpx;
			text-align: center;
			color: #FFFFFF;
		}

		.cancel {
			position: absolute;
			left: 45%;
			top: 1080rpx;

			.cancelImage {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.btnbox {
		width: 640rpx;
		display: flex;
		position: absolute;
		justify-content: space-around;
		left: 20rpx;
		top: 910rpx;

		.btnlevel {
			width: 200rpx;
			height: 64rpx;
		}
	}

	.Mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.39);
		backdrop-filter: blur(2px);
		z-index: 888;
	}

	.btn {
		width: 120rpx;
		border: 1rpx solid #ccc;
		border-radius: 8rpx;
		margin: 0 auto;
		text-align: center;
	}

	.inputarera {
		display: flex;
		justify-content: space-evenly;
	}
</style>